<template>
    <div class="project">
        <div class="top">
            <Title>项目标签</Title>
            <el-row :gutter="12" style="margin-top: 28px;">
                <el-col :span="6" v-for="(item, index) in state.tags" :key="index">
                    <div class="tag" :class="{ mb24: index < 4 }">
                        <div class="name">{{ item.name }}</div>
                        <div class="num" :style="{ color: colors[index] }">{{ item.num }}个项目</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="bottom">
            <div class="rightTop">
                <div class="text">
                    月
                </div>
            </div>
            <Title>项目排名</Title>
            <div class="ranking">
                <div class="rankingItem" v-for="(item, index) in state.rankList">
                    <div class="rank" :class="{ highLight: index < 3 }">TOP{{ index + 1 }}</div>
                    <div class="name">{{ item.name }}</div>
                    <div class="progress">
                        <div class="inner"
                            :style="{ width: `${item.num / state.total * 100}%`, background: progressColors[index] }">
                        </div>
                    </div>
                    <div class="num">{{ item.num }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue';
import request from '/@/utils/request'
import Title from './title.vue';
const colors = ['rgba(255, 203, 68, 1)', 'rgba(88, 215, 254, 1)', 'rgba(216, 105, 122, 1)', 'rgba(60, 102, 249, 1)',
    'rgba(4, 206, 204, 1)', 'rgba(255, 141, 26, 1)', 'rgba(121, 72, 234, 1)', 'rgba(165, 214, 63, 1)'
]
const progressColors = [
    'linear-gradient(90deg,rgba(255, 141, 26, 1),rgba(255, 235, 59, 1))',
    'linear-gradient(90deg,rgba(255, 141, 26, 1),rgba(255, 235, 59, 1))',
    'linear-gradient(90deg,rgba(255, 141, 26, 1),rgba(255, 235, 59, 1))',
    'linear-gradient(90deg,rgba(255, 235, 59, 1),rgba(55, 255, 206, 1))',
    'linear-gradient(90deg,rgba(255, 235, 59, 1),rgba(55, 255, 206, 1))',
]
const state = reactive({
    tags: [],
    rankList: [],
    total: 1
})
const getData = () => {
    state.tags = [
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
        { name: '全屋保洁', num: 3 },
    ]
    state.rankList = [
        { name: '全屋精保', num: 200 },
        { name: '居家保洁', num: 150 },
        { name: '整理搬家', num: 100 },
        { name: '整理收纳', num: 50 },
        { name: '新房开荒', num: 25 },
    ]
    state.total = state.rankList.reduce((total, item) => {
        return total + item.num
    }, 0)
    return
    // 以上是模拟数据，真是数据通过接口传入，如下
    request({
        url: 'analysisJudgment/getCategorize',
        method: 'post',
        data: {
        }
    }).then(res => {
        state.data = res;
        if (chatDistance) {
            setData()
        }
    })
}
getData()
</script>
<style lang="scss" scoped>
.project {
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    .top {
        height: 40%;

        .tag {
            height: 74px;
            border: 1px solid rgba(41, 255, 202, 1);
            box-shadow: inset 0px 0px 16px rgba(4, 206, 203, 1);
            text-align: center;

            &.mb24 {
                margin-bottom: 18px;
            }

            .name {
                font-size: 18px;
                color: rgba(255, 255, 255, 1);
                font-weight: 600;
                margin-top: 12px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                padding: 0 3px;
            }

            .num {
                font-size: 16px;
                text-shadow: 0 0 5px rgba(0, 94, 93, 1);
            }
        }
    }

    .bottom {
        height: 60%;
        position: relative;
        box-sizing: border-box;
        padding: 15px 25px 20px;

        .rightTop {
            $s: 63px;
            box-sizing: border-box;
            width: $s;
            height: $s;
            border-left: $s solid transparent;
            border-bottom: $s solid transparent;
            border-top: $s solid rgb(4, 206, 203);
            position: absolute;
            right: 0;
            top: 25px;

            .text {
                width: $s;
                height: $s;
                line-height: $s;
                transform: translateY(-$s * 1.26) translateX(-$s * 0.76);
                text-align: center;
                color: #fff;
                font-weight: 600;
                font-size: 18px;
            }
        }

        .ranking {
            height: calc(100% - 32px);
            padding-top: 30px;
            box-sizing: border-box;

            .rankingItem {
                height: 20%;
                display: flex;
                align-items: center;

                .rank {
                    width: 50px;
                    white-space: nowrap;
                    font-size: 18px;
                    font-weight: 600;
                    color: rgba(255, 255, 255, 1);

                    &.highLight {
                        color: rgba(55, 255, 206, 1);
                    }
                }

                .name {
                    width: 90px;
                    margin: 0 10px;
                    text-align: center;
                    line-height: 1;
                    font-size: 18px;
                    color: rgba(255, 255, 255, 1);
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .progress {
                    flex: 1;
                    height: 8px;
                    border-radius: 4px;
                    overflow: hidden;
                    background-color: rgba(229, 229, 229, 1);

                    .inner {
                        height: 100%;
                        transition: all .3s;
                    }
                }

                .num {
                    width: 60px;
                    font-size: 18px;
                    color: #fff;
                    margin-left: 20px;
                    white-space: nowrap;
                }
            }
        }
    }
}
</style>